<template>
    <view class="wrap">
        <view class="bg">
            <image src="../../static/images/icon-qrcode-bg.png"></image>
        </view>
        <view class="store">
            <view class="store-logo">
                <u-avatar :src="shopInfo.logoImg"></u-avatar>
                <!-- <image src=""></image> -->
            </view>
            <view class="store-detail">
                <view class="store-name">{{shopInfo.name}}</view>
                <view class="store-level">
                    <image v-for="(item,index) in 5" :key="index" src="../../static/images/icon-level2.png"
                        style="width: 24rpx;height: 20rpx;"></image>
                </view>
            </view>
            <view class="store-qrcode">
                <!-- <image src="../../static/images/img-qrcode.png"></image> -->
                <!-- <u-image width="400rpx" height="400rpx" :src="shopInfo.qrCode"></u-image> -->
                <canvas style="width: 200px; height: 200px;" canvas-id="myQrcode"></canvas>
            </view>
            <view class="store-qrcode_desc">扫码识别了解店铺详情</view>
        </view>
        <view class="share">
            <view class="share-header">分享至</view>
            <view class="share-main">
                <view class="share-item" @click="shareToWX">
                    <image src="../../static/images/icon-wx.png"></image>
                    <view>微信好友</view>
                </view>
                <view class="share-item" @click="shareToWXTimeline">
                    <image src="../../static/images/icon-pyq.png"></image>
                    <view>朋友圈</view>
                </view>
                <view class="share-item">
                    <image src="../../static/images/icon-qq.png"></image>
                    <view>QQ好友</view>
                </view>
                <view class="share-item" @click="saveToAlbum">
                    <image src="../../static/images/icon-imgZw.png"></image>
                    <view>保存图片</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import drawQrcode from '@/common/js/weapp.qrcode.esm.js'
    export default {
        data() {
            return {
                shopInfo: {}
            }
        },
        onLoad(options) {
            this.getShopInfo()
        },
        methods: {
            getShopInfo() {
                this.$g_api.shopDetailShop().then(({
                    data
                }) => {
                    if (!data.qrCode) {
                        uni.showToast({
                            title: '店铺不存在或未审核通过',
                            icon: 'none',
                        })
                        setTimeout(() => {
                            uni.navigateBack()
                        }, 1500)
                        return
                    }
                    data.qrCode = this.$g_util.concatRequestUrl(data.qrCode)
                    data.logoImg = this.$g_util.concatRequestUrl(data.logoImg)
                    drawQrcode({
                        width: 200,
                        height: 200,
                        canvasId: 'myQrcode',
                        text: 'http://121.37.211.224:8080/profile/share/index.html#/pages/storeDetail/storeDetail?id=' +
                            data.id,
                        // image: {
                        //   imageResource: '../../../static/images/logo.png',
                        //   dx: 70,
                        //   dy: 70,
                        //   dWidth: 60,
                        //   dHeight: 60
                        // }
                    })
                    this.shopInfo = data
                })
            },
            /**
             * 分享微信好友
             */
            shareToWX() {
                const shopInfo = this.shopInfo
                const url =
                    `http://121.37.211.224:8080/profile/share/index.html#/pages/storeDetail/storeDetail?id=${shopInfo.cid}`
                const imgUrl = '/static/images/icon-logo.png'
                uni.share({
                    provider: "weixin",
                    scene: "WXSceneSession",
                    type: 0,
                    href: url,
                    title: '布料商城',
                    summary: '布料商家在线开店平台下单即返佣',
                    imageUrl: imgUrl,
                    success: function(res) {
                        console.log("success:" + JSON.stringify(res));
                    },
                    fail: function(err) {
                        console.log("fail:" + JSON.stringify(err));
                    }
                });
            },
            /**
             * 分享微信朋友圈
             */
            shareToWXTimeline() {
                const shopInfo = this.shopInfo
                const url =
                    `http://121.37.211.224:8080/profile/share/index.html#/pages/storeDetail/storeDetail?id=${shopInfo.cid}`
                const imgUrl = '/static/images/icon-logo.png'
                uni.share({
                    provider: "weixin",
                    scene: "WXSenceTimeline",
                    type: 0,
                    href: url,
                    title: '布料商城',
                    summary: '布料商家在线开店平台下单即返佣',
                    imageUrl: imgUrl,
                    success: function(res) {
                        console.log("success:" + JSON.stringify(res));
                    },
                    fail: function(err) {
                        console.log("fail:" + JSON.stringify(err));
                    }
                });
            },
            /**
             * 分享QQ
             */
            shareToQQ() {
                const shopInfo = this.shopInfo
                const url =
                    `http://121.37.211.224:8080/profile/share/index.html#/pages/storeDetail/storeDetail?id=${shopInfo.id}`
                const imgUrl = '/static/logo.png'
                uni.share({
                    provider: "qq",
                    type: 0,
                    href: url,
                    title: '布料商城',
                    summary: '布料商家在线开店平台下单即返佣',
                    imageUrl: imgUrl,
                    success: function(res) {
                        console.log("success:" + JSON.stringify(res));
                    },
                    fail: function(err) {
                        console.log(err);
                    }
                });
            },
            /**
             * 保存图片
             */
            saveToAlbum() {
                uni.showLoading({
                    title: '保存中...'
                })
                let sysInfo = uni.getSystemInfoSync()
                uni.canvasToTempFilePath({
                    x: 0,
                    y: 0,
                    width: 200,
                    height: 200,
                    destWidth: 400 * sysInfo.pixelRatio * 2,
                    destHeight: 400 * sysInfo.pixelRatio * 2,
                    canvasId: 'myQrcode',
                    fileType: 'png',
                    success(res) {
                        uni.saveImageToPhotosAlbum({
                            filePath: res.tempFilePath,
                            success: () => {
                                uni.hideLoading()
                                uni.showToast({
                                    title: '保存成功'
                                })
                            }
                        });
                    },
                    fail(ret) {
                        console.log(ret);
                    }
                });
            }
        }
    }
</script>

<style scoped lang="scss">
    .wrap {
        padding: 50rpx 30rpx 50rpx;
    }

    .bg {
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
        font-size: 0;

        image {
            width: 100vw;
            height: 100vh;
            // z-index: -1;
        }
    }

    .store {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 50rpx 0;
        margin-bottom: 20rpx;
        border-radius: 16rpx;
        background-color: #fff;
    }

    .store-logo {
        image {
            width: 110rpx;
            height: 110rpx;
            border-radius: 10rpx;
            background-color: #ccc;
        }
    }

    .store-detail {
        display: flex;
        align-items: center;
        margin: 28rpx 0 46rpx;
    }

    .store-name {
        font-size: 36rpx;
    }

    .store-level {
        margin-left: 20rpx;

        image {
            margin-right: 4rpx;
        }
    }

    .store-qrcode {
        margin-bottom: 30rpx;

        image {
            width: 200px;
            height: 200px;
            background-color: #ccc;
        }
    }

    .store-qrcode_desc {
        font-size: 30rpx;
        color: #999;
    }

    .share {
        padding: 30rpx 20rpx 0;
        border-radius: 16rpx;
        background-color: #fff;
    }

    .share-header {
        text-align: center;
    }

    .share-main {
        display: flex;
        justify-content: space-around;
        padding: 30rpx 0 50rpx;
    }

    .share-item {
        image {
            width: 100rpx;
            height: 100rpx;
        }

        view {
            margin-top: 14rpx;
            text-align: center;
            font-size: 24rpx;
        }
    }
</style>